<!DOCTYPE html>
<html lang="en">

<!--================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.1
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================ -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">
    <title>Grid | Materialize - Material Design Admin Template</title>

    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->


    <!-- CORE CSS-->
    
    <link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <!-- Custome CSS-->    
    <link href="css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">


    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="js/plugins/prism/prism.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="js/plugins/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="js/plugins/chartist-js/chartist.min.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>

<body>
    <!-- Start Page Loading -->
    <div id="loader-wrapper">
        <div id="loader"></div>        
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <!-- End Page Loading -->

    <!-- //////////////////////////////////////////////////////////////////////////// -->

    <!-- START HEADER -->
    <header id="header" class="page-topbar">
        <!-- start header nav-->
        <div class="navbar-fixed">
            <nav class="navbar-color">
                <div class="nav-wrapper">
                    <ul class="left">                      
                      <li><h1 class="logo-wrapper"><a href="index.html" class="brand-logo darken-1"><img src="images/materialize-logo.png" alt="materialize logo"></a> <span class="logo-text">Materialize</span></h1></li>
                    </ul>
                    <div class="header-search-wrapper hide-on-med-and-down">
                        <i class="mdi-action-search"></i>
                        <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize"/>
                    </div>
                    <ul class="right hide-on-med-and-down">
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light translation-button"  data-activates="translation-dropdown"><img src="images/flag-icons/United-States.png" alt="USA" /></a>
                        </li>
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen"><i class="mdi-action-settings-overscan"></i></a>
                        </li>
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button" data-activates="notifications-dropdown"><i class="mdi-social-notifications"><small class="notification-badge">5</small></i>
                        
                        </a>
                        </li>                        
                        <li><a href="#" data-activates="chat-out" class="waves-effect waves-block waves-light chat-collapse"><i class="mdi-communication-chat"></i></a>
                        </li>
                    </ul>
                    <!-- translation-button -->
                    <ul id="translation-dropdown" class="dropdown-content">
                      <li>
                        <a href="#!"><img src="images/flag-icons/United-States.png" alt="English" />  <span class="language-select">English</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/France.png" alt="French" />  <span class="language-select">French</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/China.png" alt="Chinese" />  <span class="language-select">Chinese</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/Germany.png" alt="German" />  <span class="language-select">German</span></a>
                      </li>
                      
                    </ul>
                    <!-- notifications-dropdown -->
                    <ul id="notifications-dropdown" class="dropdown-content">
                      <li>
                        <h5>NOTIFICATIONS <span class="new badge">5</span></h5>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="#!"><i class="mdi-action-add-shopping-cart"></i> A new order has been placed!</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-stars"></i> Completed the task</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-settings"></i> Settings updated</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-editor-insert-invitation"></i> Director meeting started</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-trending-up"></i> Generate monthly report</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
                      </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- end header nav-->
  </header>
    <!-- END HEADER -->

    <!-- //////////////////////////////////////////////////////////////////////////// -->

    <!-- START MAIN -->
    <div id="main">
        <!-- START WRAPPER -->
        <div class="wrapper">

            <!-- START LEFT SIDEBAR NAV-->
            <aside id="left-sidebar-nav">
        <ul id="slide-out" class="side-nav fixed leftside-navigation">
            <li class="user-details cyan darken-2">
            <div class="row">
                <div class="col col s4 m4 l4">
                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                </div>
                <div class="col col s8 m8 l8">
                    <ul id="profile-dropdown" class="dropdown-content">
                        <li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
                        </li>
                        <li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
                        </li>
                        <li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
                        </li>
                        <li><a href="#"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
                        </li>
                    </ul>
                    <a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
                    <p class="user-roal">Administrator</p>
                </div>
            </div>
            </li>
            <li class="bold"><a href="index.html" class="waves-effect waves-cyan"><i class="mdi-action-dashboard"></i> Dashboard</a>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-view-carousel"></i> Layouts</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="layout-fullscreen.html">Full Screen</a>
                                </li>
                                <li><a href="layout-horizontal-menu.html">Horizontal Menu</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="bold"><a href="app-email.html" class="waves-effect waves-cyan"><i class="mdi-communication-email"></i> Mailbox <span class="new badge">4</span></a>
            </li>
            <li class="bold"><a href="app-calendar.html" class="waves-effect waves-cyan"><i class="mdi-editor-insert-invitation"></i> Calender</a>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-invert-colors"></i> CSS</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="css-typography.html">Typography</a>
                                </li>
                                <li><a href="css-icons.html">Icons</a>
                                </li>
                                <li><a href="css-animations.html">Animations</a>
                                </li>
                                <li><a href="css-shadow.html">Shadow</a>
                                </li>
                                <li><a href="css-media.html">Media</a>
                                </li>
                                <li><a href="css-sass.html">Sass</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-palette"></i> UI Elements</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="ui-alerts.html">Alerts</a>
                                </li>
                                <li><a href="ui-buttons.html">Buttons</a>
                                </li>
                                <li><a href="ui-badges.html">Badges</a>
                                </li>
                                <li><a href="ui-breadcrumbs.html">Breadcrumbs</a>
                                </li>
                                <li><a href="ui-collections.html">Collections</a>
                                </li>
                                <li><a href="ui-collapsibles.html">Collapsibles</a>
                                </li>
                                <li><a href="ui-tabs.html">Tabs</a>
                                </li>
                                <li><a href="ui-navbar.html">Navbar</a>
                                </li>
                                <li><a href="ui-pagination.html">Pagination</a>
                                </li>
                                <li><a href="ui-preloader.html">Preloader</a>
                                </li>
                                <li><a href="ui-toasts.html">Toasts</a>
                                </li>
                                <li><a href="ui-tooltip.html">Tooltip</a>
                                </li>
                                <li><a href="ui-waves.html">Waves</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-av-queue"></i> Advanced UI <span class="new badge"></span></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="advanced-ui-chips.html">Chips</a>
                                </li>
                                <li><a href="advanced-ui-cards.html">Cards</a>
                                </li>
                                <li><a href="advanced-ui-modals.html">Modals</a>
                                </li>
                                <li><a href="advanced-ui-media.html">Media</a>
                                </li>
                                <li><a href="advanced-ui-range-slider.html">Range Slider</a>
                                </li>
                                <li><a href="advanced-ui-sweetalert.html">SweetAlert</a>
                                </li>
                                <li><a href="advanced-ui-nestable.html">Shortable & Nestable</a>
                                </li>
                                <li><a href="advanced-ui-translation.html">Language Translation</a>
                                </li>
                                <li><a href="advanced-ui-highlight.html">Highlight</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a href="app-widget.html" class="waves-effect waves-cyan"><i class="mdi-device-now-widgets"></i> Widgets</a>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-border-all"></i> Tables</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="table-basic.html">Basic Tables</a>
                                </li>
                                <li><a href="table-data.html">Data Tables</a>
                                </li>
                                <li><a href="table-jsgrid.html">jsGrid</a>
                                </li>
                                <li><a href="table-editable.html">Editable Table</a>
                                </li>
                                <li><a href="table-floatThead.html">floatThead</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-insert-comment"></i> Forms <span class="new badge"></span></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="form-elements.html">Form Elements</a>
                                </li>
                                <li><a href="form-layouts.html">Form Layouts</a>
                                </li>
                                <li><a href="form-validation.html">Form Validations</a>
                                </li>
                                <li><a href="form-masks.html">Form Masks</a>
                                </li>
                                <li><a href="form-file-uploads.html">File Uploads</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-social-pages"></i> Pages</a>
                        <div class="collapsible-body">
                            <ul>                                        
                                <li><a href="page-contact.html">Contact Page</a>
                                </li>
                                <li><a href="page-todo.html">ToDos</a>
                                </li>
                                <li><a href="page-blog-1.html">Blog Type 1</a>
                                </li>
                                <li><a href="page-blog-2.html">Blog Type 2</a>
                                </li>
                                <li><a href="page-404.html">404</a>
                                </li>
                                <li><a href="page-500.html">500</a>
                                </li>
                                <li><a href="page-blank.html">Blank</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-action-shopping-cart"></i> eCommers</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="eCommerce-products-page.html">Products Page</a>
                                </li>                                        
                                <li><a href="eCommerce-pricing.html">Pricing Table</a>
                                </li>
                                <li><a href="eCommerce-invoice.html">Invoice</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-image"></i> Medias</a>
                        <div class="collapsible-body">
                            <ul>                                        
                                <li><a href="media-gallary-page.html">Gallery Page</a>
                                </li>
                                <li><a href="media-hover-effects.html">Image Hover Effects</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-action-account-circle"></i> User</a>
                        <div class="collapsible-body">
                            <ul>     
                                <li><a href="user-profile-page.html">User Profile</a>
                                </li>                                   
                                <li><a href="user-login.html">Login</a>
                                </li>                                        
                                <li><a href="user-register.html">Register</a>
                                </li>
                                <li><a href="user-forgot-password.html">Forgot Password</a>
                                </li>
                                <li><a href="user-lock-screen.html">Lock Screen</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-insert-chart"></i> Charts</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="charts-chartjs.html">Chart JS</a>
                                </li>
                                <li><a href="charts-chartist.html">Chartist</a>
                                </li>
                                <li><a href="charts-morris.html">Morris Charts</a>
                                </li>
                                <li><a href="charts-xcharts.html">xCharts</a>
                                </li>
                                <li><a href="charts-flotcharts.html">Flot Charts</a>
                                </li>
                                <li><a href="charts-sparklines.html">Sparkline Charts</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="li-hover"><div class="divider"></div></li>
            <li class="li-hover"><p class="ultra-small margin more-text">MORE</p></li>
            <li><a href="angular-ui.html"><i class="mdi-action-verified-user"></i> Angular UI  <span class="new badge"></span></a>
            </li>
            <li class="active"><a href="css-grid.html"><i class="mdi-image-grid-on"></i> Grid</a>
            </li>
            <li><a href="css-color.html"><i class="mdi-editor-format-color-fill"></i> Color</a>
            </li>
            <li><a href="css-helpers.html"><i class="mdi-communication-live-help"></i> Helpers</a>
            </li>
            <li><a href="changelogs.html"><i class="mdi-action-swap-vert-circle"></i> Changelogs</a>
            </li>                    
            <li class="li-hover"><div class="divider"></div></li>
            <li class="li-hover"><p class="ultra-small margin more-text">Daily Sales</p></li>
            <li class="li-hover">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="sample-chart-wrapper">                            
                            <div class="ct-chart ct-golden-section" id="ct2-chart"></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <a href="#" data-activates="slide-out" class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i class="mdi-navigation-menu"></i></a>
        </aside>
            <!-- END LEFT SIDEBAR NAV-->

            <!-- //////////////////////////////////////////////////////////////////////////// -->

            <!-- START CONTENT -->
            <section id="content">

                <!--breadcrumbs start-->
                <div id="breadcrumbs-wrapper">
            <!-- Search for small screen -->
            <div class="header-search-wrapper grey hide-on-large-only">
                <i class="mdi-action-search active"></i>
                <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize">
            </div>
                    <div class="container">
                        <div class="row">
                            <div class="col s12 m12 l12">
                                <h5 class="breadcrumbs-title">Grid</h5>
                                <ol class="breadcrumbs">
                                    <li><a href="index.html">Dashboard</a>
                                    </li>
                                    <li><a href="#">CSS</a>
                                    </li>
                                    <li class="active">Grid</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!--breadcrumbs end-->


                <!--start container-->
                <div class="container">
                    <p class="caption">Materialize using a standard 12 column fluid responsive grid system.The grid helps you layout your page in an ordered, easy fashion.</p>
                    <div class="divider"></div>
                    <div id="grid-container" class="section">
                        <div class="row">
                            <div class="col s12 m4 l3">
                                <h4 class="header">Container</h4>
                            </div>
                            <div class="col s12 m8 l9">
                                <p>The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The <code class=" language-markup">container</code> class is set to ~70% of the window
                                    width. It helps you center and contain your page content. We use the container to contain our body content.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col s12 m4 l3">
                                <h4 class="header">Demo</h4>
                                <p>Try the button below to see what the page looks like without containers.</p>
                                <a id="container-toggle-button" class="btn waves-effect waves-light">Turn off Containers</a>
                            </div>
                            <div class="col s12 m8 l9">
                                <div class="row">
                                        <div class="col s12">
                                            <div class="browser-window">
                                                <div class="top-bar">
                                                    <div class="circles">
                                                        <div id="close-circle" class="circle"></div>
                                                        <div id="minimize-circle" class="circle"></div>
                                                        <div id="maximize-circle" class="circle"></div>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <div class="row">

                                                        <div id="site-layout-example-top" class="col s12">
                                                            <!-- <p class="flat-text-logo"></p> -->
                                                        </div>
                                                        <div id="site-layout-example-right" class="col s12">
                                                            <div class="container">

                                                                <p class="flat-text small"></p>
                                                                <p class="flat-text full-width"></p>
                                                                <p class="flat-text full-width"></p>
                                                                <p class="flat-text full-width"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>

                    <!-- Grid visual demo -->
                    <div class="divider"></div>
                    <!--grid intro-->
                    <div id="grid-intro" class="section">
                        <h4 class="header">12 Columns</h4>
                        <div class="row">
                            <div class="col s12 m4 l3">
                                <p>Take a look at this section to quickly understand how the grid works!</p>
                                <p>Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.</p>
                            </div>
                            <div class="col s12 m8 l9">
                                
                                    <div class="row">
                                        <div class="col s1 grid-example"><span class="flow-text">1</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">2</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">3</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">4</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">5</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">6</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">7</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">8</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">9</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">10</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">11</span>
                                        </div>
                                        <div class="col s1 grid-example"><span class="flow-text">12</span>
                                        </div>
                                    </div>
                                <p>To get a feel of how the grid is used in HTML. Take a look at this code below which will produce a similar result as the one above.</p>
                                <p>Note: For now, just know that the <code class=" language-markup">s1</code> stands for small-1 which in plain English means "1 column on small screens".</p>
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>
                    <!--Columns live inside Rows-->
                    <div id="columns-live-inside-rows" class="section">
                        <h4 class="header">Columns live inside Rows</h4>
                        <div class="row">
                            <div class="col s12 m4 l3">
                                <p>Remember when you are creating your layout that all columns must be contained inside a row and that you must add the <code class=" language-markup">col</code> class to your inner divs to make them into columns</p>
                            </div>
                            <div class="col s12 m8 l9">
                                <div class="row">
                                    <div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span>
                                    </div>
                                    <div class="col s6 grid-example"><span class="flow-text">6-columns (one-half)</span>
                                    </div>
                                    <div class="col s6 grid-example"><span class="flow-text">6-columns (one-half)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>
                    <!--Offsets-->
                    <div id="grid-offsets" class="section">
                        <h4 class="header">Offsets</h4>
                        <div class="row">
                            <div class="col s12 m4 l3">
                                <p>To offset, simply add <code class=" language-markup">offset-s2</code> to the class where <code class=" language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after
                                    is the number of columns you want to offset by.</p>
                            </div>
                            <div class="col s12 m8 l9">
                                <div class="row">
                                    <div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span>
                                    </div>
                                    <div class="col s6 offset-s6 grid-example"><span class="flow-text">6-columns (offset-by-6)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>
                    <!--Creating Layouts-->
                    <div id="grid-layouts" class="section">
                        <h4 class="header">Creating Layouts</h4>
                        <div class="row">
                            <div class="col s12 m4 l3">
                                <p>Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.</p>
                            </div>
                            <div class="col s12 m8 l9">
                                <div class="card-panel">
                                    <div class="row">
                                        <div class="col s12 m6">
                                            <h4>Section</h4>
                                            <p>The section class is used for simple top and bottom padding. Just add the <code class=" language-markup">section</code> class to your div's containing large blocks of content.</p>
                                        </div>
                                        <div class="col s12 m6">
                                            <h4>Divider</h4>
                                            <p>Dividers are 1 pixel lines that help break up your content. Just add the <code class=" language-markup">divider</code> to a div in between your content.</p>
                                        </div>
                                    </div>
                                    <!--Sections and Dividers-->
                                    <h4 class="header">Example Sections and Dividers</h4>
                                    <div class="divider"></div>
                                    <div class="section">
                                        <h5>Section 1</h5>
                                        <p>Stuff</p>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="section">
                                        <h5>Section 2</h5>
                                        <p>Stuff</p>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="section">
                                        <h5>Section 3</h5>
                                        <p>Stuff</p>
                                    </div>
                                    <div class="divider"></div>
                                </div>
                            </div>
                        </div>


                        <div class="divider"></div>
                        <!--Example Promotion Table-->
                        <div id="promotion-table" class="section">
                            <h4 class="header">Example Promotion Table</h4>
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <p>If we want 3 divs that are equal size, we define the divs with a width of 4-columns, 4+4+4 = 12, which nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've
                                        modified it slightly for the sake of this example.</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="card-panel">
                                        <div class="row">
                                            <div class="col s4">
                                                <div class="center promo promo-example">
                                                    <i class="mdi-image-flash-on"></i>
                                                    <p class="flow-text">Speeds up development</p>
                                                    <p class="light center">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.</p>
                                                </div>
                                            </div>
                                            <div class="col s4">
                                                <div class="center promo promo-example">
                                                    <i class="mdi-social-group"></i>
                                                    <p class="flow-text">User Experience Focused</p>
                                                    <p class="light center">By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.</p>
                                                </div>
                                            </div>
                                            <div class="col s4">
                                                <div class="center promo promo-example">
                                                    <i class="mdi-action-settings"></i>
                                                    <p class="flow-text">Easy to work with</p>
                                                    <p class="light center">We have provided detailed  as well as specific code examples to help new users get started.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="divider"></div>
                        <!--Example Side Navigation Layout-->
                        <div id="side-navigation-layout" class="section">
                            <h4 class="header">Example Side Navigation Layout</h4>
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <p>You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for a even layout</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="row">
                                            <div class="col s12">
                                                <div class="browser-window">
                                                    <div class="top-bar">
                                                        <div class="circles">
                                                            <div id="close-circle" class="circle"></div>
                                                            <div id="minimize-circle" class="circle"></div>
                                                            <div id="maximize-circle" class="circle"></div>
                                                        </div>
                                                    </div>
                                                    <div class="content">
                                                        <div class="row">

                                                            <div id="site-layout-example-top" class="col s12">
                                                                <!-- <p class="flat-text-logo"></p> -->
                                                            </div>
                                                            <div id="site-layout-example-left" class="col s3">
                                                                <p class="flat-text-header"></p>
                                                                <p class="flat-text"></p>
                                                                <p class="flat-text"></p>
                                                            </div>
                                                            <div id="site-layout-example-right" class="col s9">
                                                                <p class="flat-text"></p>
                                                                <p class="flat-text"></p>
                                                                <p class="flat-text"></p>
                                                                <p class="flat-text"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>

                        <div class="divider"></div>
                        <!--Creating Responsive Layouts-->
                        <div id="grid-responsive" class="section">
                            <h4 class="header">Creating Responsive Layouts</h4>
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <p>Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="card-panel">
                                        <table class="hoverable">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th data-field="id">Mobile Devices
                                                        <br>&lt;= 600px</th>
                                                    <th data-field="name">Tablet Devices
                                                        <br>&lt;= 992px</th>
                                                    <th data-field="price">Desktop Devices
                                                        <br>&gt;= 992px</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><strong>Class Prefix</strong>
                                                    </td>
                                                    <td><code class=" language-markup">.s</code>
                                                    </td>
                                                    <td><code class=" language-markup">.m</code>
                                                    </td>
                                                    <td><code class=" language-markup">.l</code>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Container Width</strong>
                                                    </td>
                                                    <td>85%</td>
                                                    <td>85%</td>
                                                    <td>70%</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Number of Columns</strong>
                                                    </td>
                                                    <td>12</td>
                                                    <td>12</td>
                                                    <td>12</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="divider"></div>
                        <!--Creating Responsive Layouts-->
                        <div id="adding-responsiveness" class="section">
                            <h4 class="header">Adding Responsiveness</h4>
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <p>In the previous examples, we only defined the size for small screens using <code class=" language-markup">"col s12"</code>. This is fine if we want a fixed layout since the rules propogate upwards. By just saying s12,
                                        we are essentially saying <code class=" language-markup">"col s12 m12 l12"</code>. But by explicitly defining the size we can make our website more responsive.</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="row">
                                            <div class="grid-example col s12 teal lighten-2"><span class="flow-text">I am always full-width (col s12)</span>
                                            </div>
                                            <div class="grid-example col s12 m6 teal lighten-2"><span class="flow-text">I am full-width on mobile (col s12 m6)</span>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>

                        <div class="divider"></div>
                        <!--Responsive Side Navigation Layout-->
                        <div id="responsive-side-navigation-layout" class="section">
                            <h4 class="header">Responsive Side Navigation Layout</h4>
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <p>In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="row">
                                        <div class="col s12">
                                            <div class="browser-window">
                                                <div class="top-bar">
                                                    <div class="circles">
                                                        <div id="close-circle" class="circle"></div>
                                                        <div id="minimize-circle" class="circle"></div>
                                                        <div id="maximize-circle" class="circle"></div>
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <div class="row">

                                                        <div id="site-layout-example-top" class="col s12">
                                                            <!-- <p class="flat-text-logo"></p> -->
                                                        </div>
                                                        <div id="site-layout-example-left" class="col s12 m4 l3">
                                                            <p class="flat-text-header"></p>
                                                            <p class="flat-text"></p>
                                                            <p class="flat-text"></p>
                                                        </div>
                                                        <div id="site-layout-example-right" class="col s12 m8 l9">
                                                            <p class="flat-text"></p>
                                                            <p class="flat-text"></p>
                                                            <p class="flat-text"></p>
                                                            <p class="flat-text"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h4>More Responsive Grid Examples</h4>
                                    <div class="row">
                                        <div class="col grid-example s12 blue lighten-1"><span class="flow-text">s12</span>
                                        </div>
                                        <div class="col grid-example s12 m4 l2 teal lighten-1"><span class="flow-text">s12 m4 l2</span>
                                        </div>
                                        <div class="col grid-example s12 m4 l8 teal lighten-1"><span class="flow-text">s12 m4 l8</span>
                                        </div>
                                        <div class="col grid-example s12 m4 l2 teal lighten-1"><span class="flow-text">s12 m4 l2</span>
                                        </div>
                                        <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span>
                                        </div>
                                        <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span>
                                        </div>
                                        <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span>
                                        </div>
                                        <div class="col grid-example s12 m6 l3 purple lighten-3"><span class="flow-text">s12 m6 l3</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Floating Action Button -->
            <div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
                <a class="btn-floating btn-large">
                  <i class="mdi-action-stars"></i>
                </a>
                <ul>
                  <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
                  <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
                  <li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
                  <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
                </ul>
            </div>
            <!-- Floating Action Button -->
                </div>
                <!--end container-->

            </section>
            <!-- END CONTENT -->

            <!-- //////////////////////////////////////////////////////////////////////////// -->
            <!-- START RIGHT SIDEBAR NAV-->
            <aside id="right-sidebar-nav">
        <ul id="chat-out" class="side-nav rightside-navigation">
            <li class="li-hover">
            <a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
            <div id="right-search" class="row">
                <form class="col s12">
                    <div class="input-field">
                        <i class="mdi-action-search prefix"></i>
                        <input id="icon_prefix" type="text" class="validate">
                        <label for="icon_prefix">Search</label>
                    </div>
                </form>
            </div>
            </li>
            <li class="li-hover">
                <ul class="chat-collapsible" data-collapsible="expandable">
                <li>
                    <div class="collapsible-header teal white-text active"><i class="mdi-social-whatshot"></i>Recent Activity</div>
                    <div class="collapsible-body recent-activity">
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-add-shopping-cart"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">just now</a>
                                <p>Jim Doe Purchased new equipments for zonal office.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-device-airplanemode-on"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">Yesterday</a>
                                <p>Your Next flight for USA will be on 15th August 2015.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">5 Days Ago</a>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-store"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">Last Week</a>
                                <p>Jessy Jay open a new store at S.G Road.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">5 Days Ago</a>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header light-blue white-text active"><i class="mdi-editor-attach-money"></i>Sales Repoart</div>
                    <div class="collapsible-body sales-repoart">
                        <div class="sales-repoart-list  chat-out-list row">
                            <div class="col s8">Target Salse</div>
                            <div class="col s4"><span id="sales-line-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Payment Due</div>
                            <div class="col s4"><span id="sales-bar-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Delivery</div>
                            <div class="col s4"><span id="sales-line-2"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Progress</div>
                            <div class="col s4"><span id="sales-bar-2"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header red white-text"><i class="mdi-action-stars"></i>Favorite Associates</div>
                    <div class="collapsible-body favorite-associates">
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Eileen Sideways</p>
                                <p class="place">Los Angeles, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Zaham Sindil</p>
                                <p class="place">San Francisco, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Renov Leongal</p>
                                <p class="place">Cebu City, Philippines</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Weno Carasbong</p>
                                <p>Tokyo, Japan</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Nusja Nawancali</p>
                                <p class="place">Bangkok, Thailand</p>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
            </li>
        </ul>
      </aside>
            <!-- LEFT RIGHT SIDEBAR NAV-->

        </div>
        <!-- END WRAPPER -->

    </div>
    <!-- END MAIN -->



    <!-- //////////////////////////////////////////////////////////////////////////// -->

    <!-- START FOOTER -->
    <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        <span>Copyright © 2015 <a class="grey-text text-lighten-4" href="http://themeforest.net/user/geekslabs/portfolio?ref=geekslabs" target="_blank">GeeksLabs</a> All rights reserved.</span>
        <span class="right"> Design and Developed by <a class="grey-text text-lighten-4" href="http://geekslabs.com/">GeeksLabs</a></span>
        </div>
    </div>
  </footer>
    <!-- END FOOTER -->



    <!-- ================================================
    Scripts
    ================================================ -->
    
    <!-- jQuery Library -->
    <script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>    
    <!--materialize js-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <!--prism-->
    <script type="text/javascript" src="js/plugins/prism/prism.js"></script>
    <!--scrollbar-->
    <script type="text/javascript" src="js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <!-- chartist -->
    <script type="text/javascript" src="js/plugins/chartist-js/chartist.min.js"></script>   
    
    <!--plugins.js - Some Specific JS codes for Plugin Settings-->
    <script type="text/javascript" src="js/plugins.min.js"></script>
    <!--custom-script.js - Add your own theme custom JS-->
    <script type="text/javascript" src="js/custom-script.js"></script>
    
</body>

</html>